<template>
  <div>
    <div class="tab-h" >
      <div class="tab-item" v-bind:class="[num == index ?'active' : '']" v-for="(item,index) in tabs" :key="index" @click="tab(index)">{{item}}</div>
    </div>
    <group v-if="num == 0"></group>
    <miaosha v-if="num == 1"></miaosha>
    <!-- <kj v-if="num == 2"></kj> -->
  </div>
</template>

<script>
import miaosha from "@/components/miaosha"
import group from "./group/group"
// import kj from "./kanjia"
import { mapState, mapActions ,mapGetters } from 'vuex'
  export default {
    data () {
      return {
        tabs: ["拼团", "秒杀","砍价"],
        num: 0
      }
    },
    computed: {
      ...mapGetters([
        'login_info',
        'user'
      ])
    },
    beforeMount() {
      console.log('beforeMount')
      let url='../user/get_user_info?callback_url=../activity/index'
      if (!this.login_info || !this.login_info.brand_id||!this.user || !this.user.id) {
        // 用户未授权
        wx.redirectTo({
          url: url
        })
        return
      }
    },
    components: {
      miaosha,
      group,
      // kj
    },
    methods: {
      tab(index) {
        this.num = null;
        this.num = index;
      },
    },
    onLoad(param){
      if(param&&param.num){
        this.num=param.num
      }
    },
  }
</script>
<style scoped>
.tab-h{
  width: 100%;
  display: flex;
  flex-direction:row;
  line-height: 40px;
  height:40px;
  font-size: 20px;
  background: white;
  position: fixed;
  top:0;
  z-index: 10000;
}
.tab-item{
  width: 50%;
  display: inline-block;
  text-align: center;
}
.tab-item.active{
  position: relative;
}
.tab-item.active:after{
  content: "";
  display: block;
  height: 4px;
  width: 60px;
  background: #4F4F4F;
  position: absolute;
  bottom: 0;
  left:50%;
  transform: translate(-50%);
  border-radius: 1px;
}
</style>
